<template>
  <div class="w">
    <div class="title">
      <div class="title_left" @click="back">
        <i class="iconfont icon-fanhui"></i>
      </div>
      <div class="title_right">
        <el-input class="title_left_input" v-model="pageInfo.qurey"></el-input>
        <el-button class="title_left_button" @click="searchList">搜索</el-button>
      </div>
    </div>
    <div class="info">
      <div class="search" v-if="searchHistory.length != 0">
        <div class="search_header">
          <div class="header_title">搜索历史</div>
          <div class="header_delete" @click="del">
            <i class="iconfont icon-shanchu"></i>
          </div>
        </div>
        <div class="search_info">
          <div class="tag" v-for="(item, index) in searchHistory" :key="index">
            <span>{{ item }}</span>
          </div>
        </div>
      </div>
      <div class="want">
        <div class="want_title">猜你喜欢</div>
        <div class="want_info">
          <div class="want_info_shop">
            <div class="want_info_shop_title">
              <i class="iconfont icon-rehot"></i>
              <span>商家热搜</span>
            </div>
            <div class="want_info_info">
              <div class="ul">
                <ul style="list-style-type: none">
                  <li class="li1" v-for="(item, index) in number" :key="index" :class="item == 1 || item == 2 || item == 3 ? 'active' : ''">
                    {{ item }}
                  </li>
                </ul>
                <ul style="list-style-type: none">
                  <li class="li2" v-for="(item, index) in shopList" :key="index">{{ item.shopName }}</li>
                </ul>
              </div>
            </div>
          </div>
          <div class="want_info_dish">
            <div class="want_info_dish_title">
              <i class="iconfont icon-meishi1"></i>
              <span>美食热搜</span>
            </div>
            <div class="want_info_info">
              <div class="ul">
                <ul style="list-style-type: none">
                  <li class="li1" v-for="(item, index) in number" :key="index" :class="item == 1 || item == 2 || item == 3 ? 'active' : ''">
                    {{ item }}
                  </li>
                </ul>
                <ul style="list-style-type: none">
                  <li class="li2" v-for="(item, index) in dishList" :key="index">{{ item.dishName }}</li>
                </ul>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      input: '',
      searchHistory: [],
      pageInfo: {
        pageNum: 1,
        pageSize: 10,
        qurey: '',
      },
      shopList: [],
      number: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10],
      dishList: [],
      list: [],
    };
  },

  methods: {
    back() {
      this.$router.go(-1);
    },
    async getShopList() {
      const { data: res } = await this.$http.get('shop/getAllShopList', { params: this.pageInfo });
      if (res.code == 1) {
        this.shopList = res.data;
        return;
      } else {
        return this.$message.error('信息获取失败');
      }
    },
    //获取菜品列表
    async getDishesList() {
      const { data: res } = await this.$http.get('dish/getDishList', {
        params: this.pageInfo,
      });
      if (res.code == 1) {
        this.dishList = res.data.records;
      } else {
        this.$message.error('请求失败');
      }
    },
    async searchList() {
      // 没有搜索记录，把搜索值push进数组首位，存入本地
      if (!this.searchHistory.includes(this.pageInfo.qurey)) {
        this.searchHistory.unshift(this.pageInfo.qurey);
        window.localStorage.setItem('searchHistory', JSON.stringify(this.searchHistory));
      } else {
        //有搜索记录，删除之前的旧记录，将新搜索值重新push到数组首位
        let i = this.searchHistory.indexOf(this.pageInfo.qurey);
        this.searchHistory.splice(i, 1);
        this.searchHistory.unshift(this.pageInfo.qurey);
        window.localStorage.setItem('searchHistory', JSON.stringify(this.searchHistory));
      }

      this.$router.push({
        path: '/searchResult',
        query: { qurey: this.pageInfo.qurey },
      });
    },

    getSearchHistory() {
      if (JSON.parse(window.localStorage.getItem('searchHistory'))) {
        this.searchHistory = JSON.parse(window.localStorage.getItem('searchHistory'));
      } else {
        window.localStorage.setItem('searchHistory', JSON.stringify(this.searchHistory));
      }
    },
    del() {
      window.localStorage.removeItem('searchHistory');
      this.searchHistory = [];
    },
  },

  created() {
    this.getShopList();
    this.getDishesList();
    this.getSearchHistory();
  },
};
</script>

<style lang="scss" scoped>
.w {
  background-color: #f5f5f5;
  height: 100vh;
  .title {
    height: 60px;
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    .title_right {
      margin-right: 15px;
      display: flex;
      width: 320px;
      background-color: #ffffff;
      border-radius: 50px;
      align-items: center;
      .title_left_input {
        :deep(.el-input__inner) {
          border-radius: 50px;
          border: none;
        }
      }
      .el-button,
      .el-button.is-round {
        padding: 7px 15px;
      }
      .title_left_button {
        border-radius: 50px;
        margin-right: 5px;
        height: 30px;
        width: 60px;
        background-color: #f9dc50;
        font-size: 15px;
      }
    }
    .title_left {
      text-align: center;
      margin-left: 10px;
      .icon-fanhui {
        font-size: 30px;
      }
    }
  }
  .info {
    height: calc(100vh - 60px);
    background-color: #ffffff;
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
    padding: 15px;
    .search {
      height: auto;
      .search_header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 10px;
        .header_title {
          font-size: 20px;
          font-weight: bold;
        }
        .header_delete {
          .icon-shanchu {
            color: #5b5b5b;
            font-size: 18px;
          }
        }
      }
      .search_info {
        display: flex;
        flex-wrap: wrap;
        height: auto;
        position: relative;
        .tag {
          background-color: #f8f8f8;
          border-radius: 20px;
          margin: 5px 5px;
          padding: 5px;
          width: auto;

          span {
            margin-left: 5px;
            margin-right: 5px;
            color: #6e6e6e;
          }
        }
      }
    }
    .want {
      height: auto;
      margin-top: 10px;
      width: auto;
      margin-bottom: 10px;
      .want_title {
        font-size: 20px;
        font-weight: bold;
        display: inline-block;
        margin-bottom: 10px;
      }
      .want_info {
        height: auto;
        width: auto;
        overflow-x: auto;
        display: flex;
        flex-wrap: nowrap;
        scrollbar-width: none;
        -ms-overflow-style: none;
        .want_info_shop {
          background-color: #fdf3f4;
          border-radius: 20px;
          padding: 10px;
          margin-right: 10px;
          width: auto;
          .want_info_shop_title {
            margin-bottom: 10px;
            .icon-rehot {
              font-size: 20px;
              color: #f72826;
              margin-right: 5px;
            }
            span {
              font-size: 18px;
              font-weight: bold;
              color: #f81b47;
            }
          }
        }
        .want_info_dish {
          background-color: #fff3e5;
          border-radius: 20px;
          padding: 10px;
          .want_info_dish_title {
            margin-bottom: 10px;
            .icon-meishi1 {
              font-size: 20px;
              color: #fc7b01;
              margin-right: 5px;
            }
            span {
              font-size: 18px;
              color: #fe7614;
              font-weight: bold;
            }
          }
        }

        .want_info_info {
          height: auto;
          background-color: #ffffff;
          border-radius: 20px;
          width: 220px;
          .ul {
            margin-left: 10px;
            display: flex;
            width: auto;

            .li1 {
              margin: 10px 5px 10px 10px;
              text-align: center;
              width: auto;
              color: #adadad;
            }
            .active {
              color: #fe6e1f;
            }
            .li2 {
              margin: 10px 10px;
              width: auto;
            }
          }
        }
      }
    }
  }
}
</style>